<template>
  <div class="setting-shop-page">
    <!-- <el-button type="primary" class="btnList" @click="backsku">返回SKU列表页</el-button> -->
    <el-form ref="form" :model="form" label-width="160px">
      <div class="shop-details">
        <el-form-item label="商品标题">
          <el-input v-model="form.skuTitle" :disabled="true" />
        </el-form-item>

        <el-form-item label="SKU名称">
          <el-input v-model="form.sku" :disabled="true" />
        </el-form-item>

        <el-form-item label="商品分类">
          <el-input v-model="form.classifyName" :disabled="true" />
        </el-form-item>

        <el-form-item label="审批状态">
          <el-input v-model="form.checkedStatus" :disabled="true" />
          <!-- <span  v-if=="form.checkedStatus==0">未提交</span> -->
          <!-- <span v-if=="form.checkedStatus==1">审批中</span>
          <span v-if=="form.checkedStatus==2">已上架</span>
          <span v-if=="form.checkedStatus==3">审批不通过</span>
          <span v-if=="form.checkedStatus==4">已下架</span> -->
        </el-form-item>
<!-- 
        <el-form-item label="自定义封面图">
          <el-radio-group v-model="form.isDefendImage" :disabled="true">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="自定义轮播图">
          <el-radio-group v-model="form.isDefendImages" :disabled="true">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="自定义商品详情">
          <el-radio-group v-model="form.isDefendRemark" :disabled="true">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="自定义商品标题">
          <el-radio-group v-model="form.isDefendTitle" :disabled="true">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="自定义移动端商品详情" prop="isDefendUniRemark">
          <el-radio-group v-model="form.isDefendUniRemark" :disabled="true">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item> -->

        <el-form-item label="原价">
          <el-input v-model="form.originalPrice" :disabled="true" />
        </el-form-item>
        <el-form-item label="售价">
          <el-input v-model="form.price" :disabled="true" />
        </el-form-item>



        <el-form-item label="商家名称" prop="saleNumber">
          <el-input type="textarea" :disabled="true" :rows="2" v-model="form.shopName" placeholder="请输入商品详情" />
        </el-form-item>

        <el-form-item label="销量" prop="saleNumber">
          <el-input type="textarea" :disabled="true" :rows="2" v-model="form.saleNumber" placeholder="请输入商品详情" />
        </el-form-item>

        <el-form-item label="sku详情" prop="remark">
          <el-input type="textarea" :disabled="true" :rows="2" v-model="form.remark" placeholder="请输入商品详情" />
        </el-form-item>

        <el-form-item label="移动端商品详情" prop="uniRemark">
          <el-input type="textarea" :disabled="true" :rows="2" v-model="form.uniRemark" placeholder="请输入移动端商品详情" />
        </el-form-item>

        <el-form-item label="现有库存" prop="stockNumber">
          <el-input type="textarea" :disabled="true" :rows="2" v-model="form.uniRemark" placeholder="请输入现有库存" />
        </el-form-item>

        <!-- <el-form-item label="sku属性名称">
          <el-input v-model="form.attrs.name" />
        </el-form-item> -->

        <el-form-item label="商品轮播图" v-if="form.images.length>0">
          <el-upload
           :class="{uoloadSty:showBtnImg,disUoloadSty:noneBtnImg}"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :headers="headers"
            :data="dataObj"
            :file-list="form.images"
            :limit="10"
            :on-success="handleImageSuccess"
            :action="action"
          >
            <i slot="default" class="el-icon-plus" />
            <div slot="file" slot-scope="{ file }">
              <!-- <img class="el-upload-list__item-thumbnail" :src="images" /> -->
              <img class="el-upload-list__item-thumbnail" :src="file.imgPath">
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in" />
                </span>
                <span
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>

         <el-form-item label="商品封面图" v-if="form.pic.length>0">
          <el-upload
            list-type="picture-card"
             :class="{uoloadSty:showBtnImg,disUoloadSty:noneBtnImg}"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :headers="headers"
            :data="dataObj"
            :file-list="form.pic"
            :limit="1"
            :on-success="handleImageSuccess1"
            :action="action"
          >
            <i slot="default" class="el-icon-plus" />
            <div slot="file" slot-scope="{ file }">
              <!-- <img class="el-upload-list__item-thumbnail" :src="images" /> -->
              <img class="el-upload-list__item-thumbnail" :src="file.imgPath">
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in" />
                </span>
                <span
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>
      </div>
    </el-form>

    <div style="display:flex;justify-content:flex-end">
      <el-button type="primary" class="btnList" @click="backsku"
        >取消</el-button
      >
      <!-- <el-button
        type="primary"
        @click="addSku('form')"
        >确定</el-button
      > -->
    </div>

    <el-dialog
      :visible.sync="nextVisible"
      class="check-image-dialog"
      title="下一步"
      center="center"
    >
    <div class="nextbtn">
      <el-button type="primary"  @click="back">返回sku列表</el-button>
      <el-button type="primary" @click="addSkuAgain">再次添加sku</el-button>
    </div> 
    </el-dialog>

        <!-- 图片预览 -->
    <el-dialog :visible.sync="dialogVisible" title="图片预览" width="50%">
      <img :src="dialogImageUrl" alt="" width="100%" />         
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
  </div>
</template>
<script>
// import { shopSysGetById, shopSysUpdate } from "@/api/shopSys";
import { skuSave,getskuId } from "@/api/sku";
// import { uploadUrl } from "@/utils/request";
export default {
  computed:{

  },
    props:{
        skuId:{
            type:Number,
            default:0
        }
    },
  data() {
    return {
      dialogImageUrl:'',
      dialogVisible:false,
      showBtnImg:true,
      noneBtnImg:false,
      nextVisible:false,
      tabEditStatus: false, //true为编辑 false为新增
      paraArrayDialog: false, //添加参数组
      parastatus: 0, //0添加参数，1编辑参数
      row: {}, //tab栏目内容
      images: "",
      fileList: [],
      attrs: [
        {
          list: [
            {
              name: "",
              value: "",
            },
          ],
          name: "",
        },
      ],
      form: {
        attrs: [
          {
            list: [
              {
                name: "212",
                value: "",
              },
            ],
            name: "",
          },
        ],
        images:[],
        isDefendImage: 0,
        isDefendImages: 0,
        isDefendRemark: 0,
        isDefendTitle: 0,
        originalPrice: 0,
        price: 0,
        productId: 1443139220070862848,
        remark: "",
        sku: "",
        skuImage: [],
        skuTitle: "",
        weight: 0,
      },
      headers: {
        Authorization: "",
      },
      action:'',
      dataObj: {
        folderId: 1,
      },
      disabled1: true,
    //   form: {},
    };
  },
  created() {
    getskuId({skuId:localStorage.getItem('skuId')}).then(res=>{
      console.log(res,res.data.skuImage,"********88888888")
      let pic = res.data.pic;
      const imageList = res.data.images;
      this.form = res.data;
      if(pic){
        this.showBtnImg=false;
        this.noneBtnImg=true;
          this.form.pic= [];
          this.form.pic.push({
            imgPath: pic
          })
          
        this.form.images= [];
        imageList.forEach(item=>{
          this.form.images.push({
            imgPath: item
          })
        })
      }
      console.log(this.form,"测试查看")
    })
  },
  methods: {
    addSkuAgain() {
        location.reload()
    },
    back() {
        this.$router.push('skuindex')
    },
    addSkuArray() {
      let obj = {
        list: [
          {
            name: "",
            value: "",
          },
        ],
        name: "",
      };
      this.attrs.push(obj);
    },
    detelePropertyName(index) {},
    sure() {
      console.log(this.attrs, "&&&&&&&&**********");
    },
    addPropertyName(index) {
      let obj = {
        name: "",
        value: "",
      };
      this.attrs[index].list.push(obj);
    },
    // editTab(row) {
    //   this.paraArrayDialog = true;
    //   this.obj = row;
    //   this.tabEditStatus = true;
    // },
    // deleteTab(index) {
    //   this.tablist.splice(index, 1);
    //   console.log(this.tablist, "**((((((888888899999");
    // },
    // addSku() {
    //     this.obj = {
    //       sort: 0,
    //       name: "",
    //       id: "",
    //     };
    //   this.paraArrayDialog = true;
    //   //   this.tablist.push({});
    // // },

    //    handleImageSuccess(response, file, fileList) {
    //   //console.log(response);
    //   const url = response.data.url;
    //   fileList[0].url = url;
    // },

    // handleImageSuccess(response) {
    //   console.log(response, "测试查看数据内容1111111");
    //   const { url } = response.data;
    //   console.log(url, "1111111111测试查看数据内容1111111");
    //   this.form.images.push(url);
    //   this.images = url;
    // },
     handleImageSuccess(response) {
      console.log(response,"测试查看数据内容1111111")
      const { url } = response.data
      console.log(url,this.form,"1111111111测试查看数据内容1111111")
       this.form.images.push({
        imgPath: url
      })
    },

    handleImageSuccess1(response) {
      console.log(response,"测试查看数据内容1111111")
      const { url } = response.data
      console.log(url,this.form,"1111111111测试查看数据内容1111111")
       this.form.skuImage.push({
        skuImage: url
      })
    },

    // handleImageSuccess(response) {
    //   console.log(response, "测试查看数据内容1111111");
    //   const { url } = response.data;
    //   console.log(url, "1111111111测试查看数据内容1111111");
    //   this.form.images.push({
    //     imgPath: url,
    //   });
    // },
    // handleImageSuccess1(response) {
    //   console.log(response, "测试查看数据内容1111111");
    //   const { url } = response.data;
    //   console.log(url, "1111111111测试查看数据内容1111111");
    //   this.form.images.push(url);
    // },
    handlePictureCardPreview(file) {
      console.log(file, "测试查看数据内容2222222");
      this.dialogImageUrl = file.imgPath;
      this.dialogVisible = true;
    },
    // 移除图片
    handleRemove(file) {
      console.log(file, "测试查看数据内容3333333");
      const { imgPath } = file;
      this.form.imgs = this.form.imgs.filter((item) => {
        return item.imgPath !== imgPath;
      });
    },
    addSku() {
      console.log(this.form,'8dsdshdh')
      this.form.images = this.form.images.map((item) => {
        return item.imgPath;
      });
      this.form.skuImage = this.form.skuImage[0].imgPath;
      this.form.productId = localStorage.getItem("product_id");
      this.form.attrs = this.attrs;
      skuSave(this.form).then((res) => {
          if(res.data) {
              this.nextVisible = true;
          }
        console.log(res, "&&&&&&&*&&*&");
      });
    },
    backsku() {
      this.$router.push("skuindex");
    },
    async getStoreDetails() {
      const res = await shopSysGetById({});
      if (res.code === "") {
        this.form = res.data;
      }
    },
    onSubmit() {
      console.log("submit!");
    },
    // 编辑取消
    editDisabled1() {
      this.disabled1 = !this.disabled1;
    },
    async updateStore() {
      const res = await shopSysUpdate(this.form);
      if (res.code === "") {
        this.disabled1 = true;
        this.$message({
          message: "成功",
          type: "success",
        });
      }
    },
    handleAvatarSuccess(response) {
      const { url } = response.data;
      this.form.shopLogo = url;
    },
    approve() {
      this.$router.push({ path: "/setting/shop/wechat-approve" });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep  .el-upload--picture-card{
  width:148px;
  height:148px;
  line-height:148px;
}
::v-deep .disUoloadSty .el-upload--picture-card{
  display:none !important;   /* 上传按钮隐藏 */
}
@import url("../../styles/elDialog.scss");
.setting-shop-page {
  margin-top: 20px;
  min-height: calc(100% - 20px);
  background-color: #ffffff;
  padding: 15px 20px;
  .h5 {
    max-width: 1000px;
    display: flex;
    font-size: 20px;
    margin: 20px auto;
    padding-left: 10px;
    padding-right: 300px;
    flex-wrap: 800;
    .title {
      flex: 1;
    }
  }
  .shop-details {
    max-width: 800px;
    margin: auto;
    .el-input,
    .el-textarea {
      width: 380px;
    }
    // 不能编辑样式
    .el-input.is-disabled .el-input__inner,
    .el-textarea.is-disabled .el-textarea__inner {
      cursor: inherit;
      background-color: #f8f8f8;
      border: 1px solid #f8f8f8;
      color: #606266;
    }
  }
  .avatar-uploader {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    line-height: 80px;
    text-align: center;
    .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
      }
    }
  }
}
</style>
